// pages/Zeitpunktder/Zeitpunktder.js
// 获取应用实例
Page({
  data: {
    width: 0,
    height: 0,
    open: false,
    mark: 0,
    newmark: 0,
    startmark: 0,
    endmark: 0,
    windowWidth: wx.getSystemInfoSync().windowWidth,
    staus: 1,
    translate: ''
  },
  //onLoad生命周期函数，监听页面加载
  onLoad: function () {
    //将全局变量Index保存在that中，里面函数调用
    var that = this
    //获取系统信息
    wx.getSystemInfo({
      //获取系统信息成功，将系统窗口的宽高赋给页面的宽高
      success: function (res) {
        that.width = res.windowWidth
        that.height = res.windowHeight
      }
    })
  },
  //onReady生命周期函数，监听页面初次渲染完成
  onReady: function () {
    //调用canvasClock函数
    this.canvasClock()
    //对canvasClock函数循环调用
    this.interval = setInterval(this.canvasClock, 1000)
  },
  canvasClock: function () {
    var context = wx.createContext()//创建并返回绘图上下文（获取画笔）
    //设置宽高
    var width = this.width
    var height = this.height
    var R = width / 2 - 55;//设置文字距离时钟中心点距离
    //重置画布函数
    function reSet() {
      context.height = context.height;//每次清除画布，然后变化后的时间补上
      context.translate(width / 2, height / 3);//设置坐标轴原点
      context.save();//保存中点坐标1
    }
    //绘制中心圆和外面大圆
    function circle() {
      //外面大圆
      context.setLineWidth(5);
      context.beginPath();
      context.arc(0, 0, width / 2 - 80, 0, 2 * Math.PI, true);
      context.closePath();
      context.setShadow(0, 5, 10, '#4d4d4d')
      context.stroke();
      //中心圆
      context.setLineWidth(2);
      context.beginPath();
      context.arc(0, 0, 3, 0, 2 * Math.PI, true);
      context.setShadow(0, 0, 0, 'blue')
      context.closePath();
      context.stroke();
    }
    //绘制字体
    // function num() {
    //   // var R = width/2-60;//设置文字距离时钟中心点距离
    //   context.setFontSize(20)//设置字体样式
    //   context.textBaseline = "middle";//字体上下居中，绘制时间
    //   for (var i = 1; i < 13; i++) {
    //     //利用三角函数计算字体坐标表达式
    //     var x = R * Math.cos(i * Math.PI / 6 - Math.PI / 2);
    //     var y = R * Math.sin(i * Math.PI / 6 - Math.PI / 2);
    //     if (i == 11 || i == 12) {//调整数字11和12的位置
    //       context.fillText(i, x - 12, y + 9);
    //     } else {
    //       context.fillText(i, x - 6, y + 9);
    //     }
    //   }
    // }
    //绘制小格
    // function smallGrid() {
    //   context.setLineWidth(1);
    //   context.rotate(-Math.PI / 2);//时间从3点开始，倒转90度
    //   for (var i = 0; i < 60; i++) {
    //     context.beginPath();
    //     context.rotate(Math.PI / 30);
    //     context.moveTo(width / 2 - 30, 0);
    //     context.lineTo(width / 2 - 40, 0);
    //     context.stroke();
    //   }
    // }
    // //绘制大格
    // function bigGrid() {
    //   context.setLineWidth(5);
    //   for (var i = 0; i < 12; i++) {
    //     context.beginPath();
    //     context.rotate(Math.PI / 6);
    //     context.moveTo(width / 2 - 30, 0);
    //     context.lineTo(width / 2 - 45, 0);
    //     context.stroke();
    //   }
    // }
    //指针运动函数
    function move() {
      var t = new Date();//获取当前时间
      var h = t.getHours();//获取小时
      h = h > 12 ? (h - 12) : h;//将24小时制转化为12小时制
      var m = t.getMinutes();//获取分针
      var s = t.getSeconds();//获取秒针
      context.save();//再次保存2
      context.setLineWidth(3);
      //旋转角度=30度*（h+m/60+s/3600）
      //分针旋转角度=6度*（m+s/60）
      //秒针旋转角度=6度*s
      context.beginPath();
      //绘制时针
      context.rotate((Math.PI / 6) * (h + m / 60 + s / 3600));
      context.moveTo(-10, 0);
      context.lineTo(width / 4 - 40, 0);
      context.stroke();
      context.restore();//恢复到2,（最初未旋转状态）避免旋转叠加
      context.save();//3
      //画分针
      context.setLineWidth(2);
      context.beginPath();
      context.rotate((Math.PI / 20) * (m + s / 60));
      context.moveTo(-15, 0);
      context.lineTo(width / 3.5 - 33, 0);
      context.stroke();
      context.restore();//恢复到3，（最初未旋转状态）避免旋转叠加
      context.save();
      //绘制秒针
      context.setLineWidth(1.5);
      context.beginPath();
      context.rotate((Math.PI / 30) * s);
      context.moveTo(-20, 0);
      context.lineTo(width / 3 - 35, 0);
      context.setStrokeStyle("#a43014")
      context.stroke();
    }
    //调用
    function drawClock() {
      reSet();
      circle();
      // num();
      // smallGrid();
      // bigGrid();
      move();
    }
    drawClock()//调用运动函数
    // 调用 wx.drawCanvas，通过 canvasId 指定在哪张画布上绘制，通过 actions 指定绘制行为
    wx.drawCanvas({
      canvasId: 'myCanvas',
      actions: context.getActions()
    })
  },
  //页面卸载，清除画布绘制计时器
  onUnload: function () {
    clearInterval(this.interval)
  },
  tap_ch: function (e) {
    if (this.data.open) {
      this.setData({
        translate: 'transform: translateX(0px)'
      })
      this.data.open = false;
    } else {
      this.setData({
        translate: 'transform: translateX(' + this.data.windowWidth * 0.75 + 'px)'
      })
      this.data.open = true;
    }
  },
  tap_start: function (e) {
    this.data.mark = this.data.newmark = e.touches[0].pageX;
    if (this.data.staus == 1) {
      // staus = 1指默认状态
      this.data.startmark = e.touches[0].pageX;
    } else {
      // staus = 2指屏幕滑动到右边的状态
      this.data.startmark = e.touches[0].pageX;
    }

  },
  tap_drag: function (e) {
    /*
     * 手指从左向右移动
     * @newmark是指移动的最新点的x轴坐标 ， @mark是指原点x轴坐标
     */
    this.data.newmark = e.touches[0].pageX;
    if (this.data.mark < this.data.newmark) {
      if (this.data.staus == 1) {
        if (this.data.windowWidth * 0.75 > Math.abs(this.data.newmark - this.data.startmark)) {
          this.setData({
            translate: 'transform: translateX(' + (this.data.newmark - this.data.startmark) + 'px)'
          })
        }
      }

    }
    /*
     * 手指从右向左移动
     * @newmark是指移动的最新点的x轴坐标 ， @mark是指原点x轴坐标
     */
    if (this.data.mark > this.data.newmark) {
      if (this.data.staus == 1 && (this.data.newmark - this.data.startmark) > 0) {
        this.setData({
          translate: 'transform: translateX(' + (this.data.newmark - this.data.startmark) + 'px)'
        })
      } else if (this.data.staus == 2 && this.data.startmark - this.data.newmark < this.data.windowWidth * 0.75) {
        this.setData({
          translate: 'transform: translateX(' + (this.data.newmark + this.data.windowWidth * 0.75 - this.data.startmark) + 'px)'
        })
      }

    }

    this.data.mark = this.data.newmark;

  },
  tap_end: function (e) {
    if (this.data.staus == 1 && this.data.startmark < this.data.newmark) {
      if (Math.abs(this.data.newmark - this.data.startmark) < (this.data.windowWidth * 0.2)) {
        this.setData({
          translate: 'transform: translateX(0px)'
        })
        this.data.staus = 1;
      } else {
        this.setData({
          translate: 'transform: translateX(' + this.data.windowWidth * 0.6 + 'px)'
        })
        this.data.staus = 2;
      }
    } else {
      if (Math.abs(this.data.newmark - this.data.startmark) < (this.data.windowWidth * 0.2)) {
        this.setData({
          translate: 'transform: translateX(' + this.data.windowWidth * 0.6 + 'px)'
        })
        this.data.staus = 2;
      } else {
        this.setData({
          translate: 'transform: translateX(0px)'
        })
        this.data.staus = 1;
      }
    }

    this.data.mark = 0;
    this.data.newmark = 0;
  }
})
